<template>
	<view class="content">
		<image class="top-bg" mode="aspectFill" src="../../static/mine/a8e5cf0de655e59356e226285ce17e0.png"></image>
		<view class="content-block">
			<view class="block user-block">
				<view class="photo-item">
					<image class="user-photo" :src="form.faceUrl"></image>
					<navigator url="/pages/mine/change" class="iconfont icon-bianji">
						编辑
					</navigator>
				</view>
				<view class="info-block">
					<view class="user-name">{{form.notName}}</view>
					<view class="statistics-block">
						<view class="statistics-item">
							<view class="num">0</view>
							<view class="label">获赞</view>
						</view>
						<view class="statistics-item">
							<view class="num">7</view>
							<view class="label">关注</view>
						</view>
						<view class="statistics-item">
							<view class="num">0</view>
							<view class="label">粉丝</view>
						</view>
						<view class="statistics-item">
							<view class="num">0</view>
							<view class="label">来访</view>
						</view>
					</view>
				</view>
				<view class="introduce" v-if="form.introduce!=null&&form.introduce!=''">{{form.introduce}}
					<view class="iconfont icon-bianji"></view>
				</view>
				<view class="introduce" v-else>
					{{text}}
					<view class="iconfont icon-bianji"></view>
				</view>
			</view>
			<view class="block menu-block">
				<view class="menu-content" :class="foldStatus?'active':''">
					<view v-for="(item,index) in menu" :key="item.id" class="menu-item"
						@click="menuJump(item.url,item.id)">
						<image class="menu-icon" :src="item.icon"></image>
						<view class="menu-name">{{item.value}}</view>
					</view>
				</view>
				<view class="iconfont fold" @click="fold()" :class="foldStatus?'icon-xiangshang':'icon-xiangxia'">
				</view>
			</view>
			<view class="block vlog-block">
				<view class="vlog-tab">
					<view :class="tabActive==1?'active':''" @click="tabActive=1" class="tab-item">旅游圈 {{count}}
					</view>
					<!-- <view :class="tabActive==2?'active':''" @click="tabActive=2" class="tab-item">赞过 0</view> -->
				</view>
				<block v-if="tabActive==1">
					<view class="vlog-content">
						<view class="list-col">
							<navigator hover-class="none" :url="'/pages/Vlog/detail?id='+item.id"
								v-for="(item,index) in list.colA" :key="item.id" class="list-item">
								<view class="photo-block">
									<image mode="widthFix" class="photo" :src="item.imgList[0].imgUrl"></image>
									<view v-if="item.position" class="position">
										<view class="iconfont icon-weizhi"></view>{{item.position}}
									</view>
								</view>
								<view class="title">{{item.title}}</view>
								<view class="user">
									<image class="user-photo" :src="item.customer.faceUrl"></image>
									<view class="user-name">{{item.customer.notName}}</view>
									<view class="iconfont icon-zan"></view>
									<view class="view-count">{{item.fabulous}}</view>
								</view>
							</navigator>
						</view>
						<view class="list-col">
							<navigator hover-class="none" :url="'/pages/Vlog/detail?id='+item.id"
								v-for="(item,index) in list.colB" :key="item.id" class="list-item">
								<view class="photo-block">
									<image mode="widthFix" class="photo" :src="item.imgList[0].imgUrl"></image>
									<view v-if="item.position" class="position">
										<view class="iconfont icon-weizhi"></view>{{item.position}}
									</view>
								</view>
								<view class="title">{{item.title}}</view>
								<view class="user">
									<image class="user-photo" :src="item.customer.faceUrl"></image>
									<view class="user-name">{{item.customer.notName}}</view>
									<view class="iconfont icon-zan"></view>
									<view class="view-count">{{item.fabulous}}</view>
								</view>
							</navigator>
						</view>
					</view>
				</block>
				<block v-else>暂无数据！</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCustomerApi
	} from '@/api/customer.js';
	import {
		getListApi
	} from '@/api/mine.js';
	import {
		getStorage,
		setStorage,
		removeStorage
	} from '@/util/auth.js';
	export default {
		data() {
			return {
				form: {},
				count: '',
				text: '向大家介绍一下自己',
				custom: null,
				menu: [{
						id: 1,
						value: '我的预定',
						icon: '/static/mine/order.png',
						url: '/pages/mine/reserve'
					},
					{
						id: 2,
						value: '发布旅游圈',
						icon: '/static/tabbar/vlog_icon_selected.png',
						url: '/pages/mine/detail'
					},
					// {
					// 	id: 4,
					// 	value: '推广中心',
					// 	icon: '/static/mine/promotion.png'
					// },
					{
						id: 4,
						value: '在线投诉',
						icon: '/static/mine/complaint.png'
					},
					{
						id: 3,
						value: '退出登录',
						icon: '/static/mine/log_out.png'
					},
				],
				foldStatus: false,
				tabActive: 1,
				list: {
					colA: [],
					colB: []
				}
			}
		},
		methods: {
			logout() {
				removeStorage('login');
				this.utils.showToast('退出成功', function() {
					uni.navigateTo({
						url: '/pages/lender/lender'
					})
				})
			},
			fold() {
				this.foldStatus = !this.foldStatus;
			},
			menuJump(url, id) {
				if (id == 4) {
					uni.navigateTo({
						url: '/pages/complaints/index'
					})
				} else if (id == 3) {

					this.logout();
				} else if (url) {
					uni.navigateTo({
						url: url + '?id=' + id
					})
				} else {
					this.utils.showDevelopingTips();
				}
			},
			getCustomer() {
				getCustomerApi().then((res) => {
					if (res.code == 1) {
						this.form = res.data;
					} else {
						console.log(res)
					}
				}).catch((res) => {
					console.log(res)
				})
			},
			//查询旅游圈
			getList() {
				getListApi({
					page: 0,
					limit: 0
				}).then((res) => {
					console.log(res)
					if (res.code == 1) {
						this.list.colA = res.dataA
						this.list.colB = res.dataB
						this.count = res.count
					} else {
						uni.showToast({
							title: '加载失败',
							mask: true,
						})
					}
				}).catch((res) => {
					uni.hideLoading();
					uni.showToast({
						title: '加载失败',
						mask: true,
					})
				})
			},
		},
		mounted() {
			/*自适应微信胶囊按钮*/
			this.custom = this.utils.getCustomNavData();
		},
		onShow() {
			this.getCustomer();
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		overflow: hidden;

		.top-bg {
			width: 100%;
		}

		.content-block {
			background: #fff;
			margin-top: -50rpx;
			position: relative;
			border-radius: 30rpx 30rpx 0 0;

			.block.user-block {
				display: flex;
				flex-direction: column;
				padding: 0 40rpx;

				.photo-item {
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					.user-photo {
						width: 140rpx;
						height: 140rpx;
						border-radius: 50%;
						margin-top: -40rpx;
						box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
					}

					.iconfont {
						size: 40rpx;
						margin-top: 20rpx;

					}
				}

				.info-block {
					width: 100%;
					display: flex;
					flex-direction: column;

					.user-name {
						margin-top: 20rpx;
						font-size: 42rpx;
						font-weight: bold;
					}

					.statistics-block {
						display: flex;
						flex-direction: row;
						margin-top: 16rpx;

						.statistics-item {
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-right: 30rpx;
							font-size: 26rpx;

							.num {
								font-weight: bold;
								font-size: 30rpx;
								margin-right: 10rpx;
							}

							.label {
								color: $color-secondary-text;
							}
						}
					}
				}

				.introduce {
					margin-top: 16rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					color: $color-secondary-text;
					font-size: 28rpx;

					.iconfont {
						margin-left: 10rpx;
					}
				}
			}

			.menu-block {
				display: flex;
				flex-direction: column;
				margin-top: 40rpx;

				.menu-content {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					height: 142rpx;
					overflow: hidden;

					.menu-item {
						width: 20%;
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-bottom: 40rpx;

						.menu-icon {
							width: 60rpx;
							height: 60rpx;
						}

						.menu-name {
							color: $color-secondary-text;
							margin-top: 10rpx;
							font-size: 24rpx;
						}
					}
				}

				.menu-content.active {
					transition: all .3s ease;
					height: auto;
				}

				.fold {
					display: flex;
					flex-direction: row;
					justify-content: center;
					color: $color-secondary-text;
					font-size: 26rpx;
					margin-bottom: 20rpx;
				}
			}

			.vlog-block {
				box-shadow: 0 -5px 15px 0px rgba(0, 0, 0, 0.08);
				display: flex;
				flex-direction: column;

				.vlog-tab {
					display: flex;
					flex-direction: row;
					justify-content: center;
					border-bottom: 1px solid #efefef;

					.tab-item {
						margin: 0 30rpx;
						height: 100rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-bottom: 3px solid rgba(0, 0, 0, 0);
						font-weight: bold;
					}

					.tab-item.active {
						border-bottom: 3px solid $color-primary;
					}
				}

				.vlog-content {
					display: flex;
					flex-direction: row;
					padding: 20rpx;

					.list-col {
						width: calc(50% - 10rpx);
						margin-right: 20rpx;
						display: flex;
						flex-direction: column;

						.list-item {
							width: 100%;
							display: flex;
							flex-direction: column;
							margin-bottom: 20rpx;

							.photo-block {
								width: 100%;
								position: relative;
								display: flex;
								flex-direction: row;

								.photo {
									border-radius: 20rpx;
									width: 100%;
								}

								.position {
									position: absolute;
									width: 100%;
									bottom: 20rpx;
									left: 20rpx;
									color: #fff;
									font-size: 24rpx;
									display: flex;

									.iconfont {
										margin-right: 10rpx;
									}
								}
							}

							.title {
								font-size: 30rpx;
								font-weight: bold;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
								margin-top: 16rpx;
							}

							.user {
								margin-top: 10rpx;
								display: flex;
								flex-direction: row;
								width: 100%;
								align-items: center;

								.user-photo {
									width: 40rpx;
									height: 40rpx;
									margin-right: 10rpx;
									border-radius: 50%;
								}

								.user-name {
									font-size: 24rpx;
									color: $color-secondary-text;
									flex-grow: 1;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.view-count {
									font-size: 24rpx;
									color: $color-secondary-text;
								}

								.iconfont {
									margin-right: 10rpx;
									color: $color-secondary-text;
									font-size: 28rpx;
								}

								.iconfont.icon-zanxuanzhong {
									color: red;
								}

							}
						}

						.list-item:last-child {
							margin-bottom: 0;
						}
					}

					.list-col:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}
</style>